
import { provide, inject, reactive } from 'vue';

/** 状态类型 */
interface State {
  /** 用户名字 */
  user: string,
  /** 地址 */
  region: string,
  [key: string]: any
}
/** 修改状态的类型 */
interface UpdateState {
  /** 修改方法
   * @param {string} key-需要修改状态的key值 
   * @param {string} val-需要修改状态的值 
   */
  (key: string, val: string): void
}
/** 返回状态的类型 */
interface ProvideInject {
  /** 初始化状态 */
  location: State,
  /** 修改状态方法 */
  updateLocation: UpdateState
}
/** 注入状态的 key值 Symbol类型  */
export const stateSymbol = Symbol('state');
/** 初始化创建状态的方法
 * @returns {ProvideInject}
 */
export const initState = (): ProvideInject => {
  const location: State = reactive({
    user: "",
    region: "",
  });
  const updateLocation: UpdateState = (key: string, val: string) => {
    location[key] = val;
  };
  return { updateLocation, location }
};
/** 注入-状态
 * @returns {ProvideInject}
 */
export const injectState = (): ProvideInject => (inject(stateSymbol) as ProvideInject);
/** 供应-状态
 * @returns {ProvideInject}
 */
export const provideState = (): ProvideInject => {
  const a = initState()
  provide(stateSymbol, a)
  return a
}